<template>
  <div>
    <el-row style="width: 98%; padding: 15px 0 15px 0; margin: 0 auto">
      <el-col :span="2">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="addEnumGroupDialogForm = true"
        >
          添加枚举组
        </el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-table
        ref="enumGroupData"
        :data="
          tableData == null
            ? []
            : tableData.slice(
                (pageData.currentPage - 1) * pageData.pageSize,
                pageData.currentPage * pageData.pageSize
              )
        "
        @row-click="handleExpandRow"
        stripe
        border
        empty-text="当前没有数据，请添加数据"
        style="width: 98%; margin: 0 auto"
      >
        <el-table-column
          prop="enumGroupId"
          label="枚举组id"
          width="100"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column
          prop="enumGroupName"
          label="枚举组英文名"
          width="180"
          sortable
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="enumGroupTitle"
          label="枚举组中文名"
          width="180"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="enumGroupDescription"
          label="枚举组描述"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          label="操作"
          width="180px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEditEnumGroup(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              @click="handleAddEnumItem(scope.$index, scope.row)"
            >
              添加枚举项
            </el-button>
            &emsp;&emsp;
            <template>
              <el-popconfirm
                @onConfirm="handleDeleteEnumGroup(scope.$index, scope.row)"
                title="确认删除该枚举组么？"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
        <el-table-column type="expand" align="center">
          <template slot-scope="props">
            <el-table :data="props.row.items">
              <el-table-column
                prop="enumItemId"
                label="枚举项id"
                width="80"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="enumItemKey"
                label="枚举项键"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="enumItemValue"
                label="枚举项值"
                align="center"
              ></el-table-column>
              <!-- 子表格操作列 -->
              <el-table-column
                show-overflow-tooltip
                align="center"
                label="操作"
                width="180px"
              >
                <template slot-scope="scope">
                  <el-popconfirm
                    @onConfirm="handleDeleteEnumItem(scope.$index, scope.row)"
                    title="确认删除该枚举项么？"
                  >
                    <el-button slot="reference" type="text">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        background
        :current-page="pageData.currentPage"
        :layout="layout"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageData.pageSize"
        :total="pageData.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-row>

    <el-dialog
      :title="title"
      @closed="changeDisabledStatusFalse"
      :visible.sync="addEnumGroupDialogForm"
    >
      <el-form
        ref="enumData"
        :model="enumData"
        :label-width="formLabelWidth"
        style="width: 80%; margin: 0 auto"
      >
        <el-form-item
          label="枚举组英文名"
          prop="enumGroup.enumGroupName"
          :rules="[
            {
              required: true,
              message: '请完善枚举组英文名信息',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="enumData.enumGroup.enumGroupName"
            :disabled="isEditEnumGroupName"
            placeholder="请输入枚举组英文名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="枚举组中文名"
          prop="enumGroup.enumGroupTitle"
          :rules="[
            {
              required: true,
              message: '请完善枚举组中文名信息',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="enumData.enumGroup.enumGroupTitle"
            :disabled="isEditEnumGroupTitle"
            placeholder="请输入枚举组中文名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="枚举组描述"
          prop="enumGroup.enumGroupDescription"
          :rules="[
            {
              required: true,
              message: '请完善枚举组描述信息',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="enumData.enumGroup.enumGroupDescription"
            :disabled="isEditEnumGroupDescription"
            placeholder="请输入枚举组描述"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="5">
            <el-button type="primary" @click="handleAddEnumItemData">
              添加枚举项
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="danger" @click="handleDeleteEnumItemData">
              删除选中枚举项
            </el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-table
            :data="enumData.enumItemList"
            :row-class-name="rowClassName"
            @selection-change="handleDetailSelectionChange"
          >
            <el-table-column
              type="selection"
              width="30"
              align="center"
            ></el-table-column>
            <el-table-column
              label="序号"
              prop="xh"
              align="center"
              width="50"
            ></el-table-column>
            <el-table-column label="枚举项键" align="center">
              <template slot-scope="scope">
                <el-form-item
                  style="margin-top: 18px"
                  label-width="20px"
                  label=" "
                  :prop="'enumItemList[' + (scope.row.xh - 1) + '].enumItemKey'"
                  :rules="[
                    {
                      required: true,
                      message: '请完善枚举项键信息',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    v-model="
                      enumData.enumItemList[scope.row.xh - 1].enumItemKey
                    "
                    placeholder="请输入枚举项键名"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="枚举项值" align="center">
              <template slot-scope="scope">
                <el-form-item
                  style="margin-top: 18px"
                  label-width="20px"
                  label=" "
                  :prop="
                    'enumItemList[' + (scope.row.xh - 1) + '].enumItemValue'
                  "
                  :rules="[
                    {
                      required: true,
                      message: '请完善枚举项值信息',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    v-model="
                      enumData.enumItemList[scope.row.xh - 1].enumItemValue
                    "
                    placeholder="请输入枚举项值"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addEnumGroupDialogForm = false">取消</el-button>
        <el-button type="primary" @click="handleAddEnumData">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改枚举组信息" :visible.sync="editEnumGroupDialogForm">
      <el-form
        ref="editEnumGroupData"
        :rules="editEnumGroupDataRules"
        :model="editEnumGroupData"
        :label-width="formLabelWidth"
        style="width: 80%; margin: 0 auto"
      >
        <el-form-item label="枚举组英文名" prop="enumGroupName">
          <el-input
            v-model="editEnumGroupData.enumGroupName"
            placeholder="请输入枚举组英文名"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="枚举组中文名" prop="enumGroupTitle">
          <el-input
            v-model="editEnumGroupData.enumGroupTitle"
            placeholder="请输入枚举组中文名"
          ></el-input>
        </el-form-item>
        <el-form-item label="枚举组描述" prop="enumGroupDescription">
          <el-input
            v-model="editEnumGroupData.enumGroupDescription"
            placeholder="请输入枚举组描述"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editEnumGroupDialogForm = false">取消</el-button>
        <el-button type="primary" @click="handleEditEnumGroupData">
          修改
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./enumData.js"></script>
